<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
    <div class="header_center">
        <div class="header-logo"></div>
        <div class="header-text">
            <ul>
                <li><a href="#">我要拍片</a></li>
                <li><a href="#">人脉资源</a></li>
                <li><a href="#">器材租赁</a></li>
                <li><a href="#">服装租赁</a></li>
                <li><a href="#">道具租赁</a></li>
                <li><a href="#">车辆租赁</a></li>
                <li><a href="#">招募建组</a></li>
                <li><a href="#">人才孵化</a></li>
                <li><a href="#">项目孵化</a></li>
            </ul>
        </div>
        <div class="xiala">
            <ul>
                <li class="gwd"><a href="购物袋.html">购物袋</a></li>
                <li class="sc"><a href="收藏.html">我的收藏</a></li>
                <li class="dd"><a href="订单.html">订单</a></li>
                <li class="zh"><a href="账户.html">账户</a></li>
                <li class="dl"><a href="登录.html">登录</a></li>
            </ul>
        </div>
        <div class="header-logo2"></div>
    </div>
</div>
<div class="banner">
    <ul>
        <li><img src="images/banner_03.jpg"></li>
        <li><img src="images/banner_04.jpg"></li>
        <li><img src="images/banner_03.jpg"></li>
        <li><img src="images/banner_04.jpg"></li>
        <li><img src="images/banner_03.jpg"></li>
        <li><img src="images/banner_04.jpg"></li>
        <li><img src="images/banner_03.jpg"></li>
        <li><img src="images/banner_04.jpg"></li>
    </ul>
    <div class="circle">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
    </div>
    <span class="prev">&lt;</span>
    <span class="next">&gt;</span>
   </div>
<div class="banner-pic">
    <div class="center">
    <a href="#"><img src="images/ad_01.jpg" /></a>
    <a href="#"><img src="images/ad_02.jpg" /></a>
    <a href="#"><img src="images/ad_03.jpg" /></a>
    <a href="#"><img src="images/ad_04.jpg" /></a>
    </div>
</div>
<div class="footer">
    <div class="footer-logo"></div>
    <div class="box">
    <ul>
        <li><a href="#">关于我们<span>|</span></a></li>
        <li><a href="#">隐藏政策<span>|</span></a></li>
        <li><a href="#">使用条款<span>|</span></a></li>
        <li><a href="#">销售政策<span>|</span></a></li>
        <li><a href="#">网站地图<span>|</span></a></li>
        <li><a href="#">APP下载</a></li>
    </ul>
    <p>Copyight@121255保留所有权利</p>
    <p>京公安:2222号,ICP:42423号</p>
    </div>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        //鼠标移入大盒子让箭头显示，移出消失
        $(".banner").hover(function () {
            $(".banner .prev,.banner .next").fadeIn();
            clearInterval(timer);
        },function () {
            $(".banner .prev,.banner .next").fadeOut();
            timer = setInterval(lunbo,2000);
        });
        //初始化一个全局变量
        var _index = 0;
        var timer = null;
        $(".circle span").mouseover(function () {
            //当鼠标移入的时候，给当前移入的元素添加类名
            //把当前移入元素上下同级的所有元素的类名移除
            $(this).addClass("active").siblings().removeClass("active");
            //获取当前移入元素的下标
            _index = $(this).index();
            //改变图片
            $(".banner ul li").eq(_index).fadeIn().siblings().fadeOut();
        })

        function lunbo() {
            if(_index == 7){
                _index = 0;
            }else{
                _index++;
            }
            $(".circle span").eq(_index).addClass("active").siblings().removeClass("active");
            $(".banner ul li").eq(_index).fadeIn().siblings().fadeOut();
        }
        //开启定时器
        timer = setInterval(lunbo,2000);
        //点击切换到下一张
        $("#.banner .next").click(function () {
            if(_index == 7){
                _index = 0;
            }else{
                _index++;
            }
            $(".circle span").eq(_index).addClass("active").siblings().removeClass("active");
            $(".banner ul li").eq(_index).fadeIn().siblings().fadeOut();
        })
        //点击切换到上一张
        $(".banner .prev").click(function () {
            if(_index == 0){
                _index = 7;
            }else{
                _index--;
            }
            $(".circle span").eq(_index).addClass("active").siblings().removeClass("active");
            $(".banner ul li").eq(_index).fadeIn().siblings().fadeOut();
        })
        $(".heade-logo2").hover(function(){
            $(".xiala").stop().slideDown();
        },function(){
            $(".xiala").stop().slideUp();
        })
    })
</script>